<template >
    <div class="fixed top-[20%] left-[50%] translate-x-[-50%] w-[340px] h-[270px] text-sm bg-white dark:bg-zinc-800 rounded border border-zinc-200 dark:border-zinc-900 shadow-2xl">
        <div class="flex items-center h-5 text-left px-1 mb-1">
            <span class="flex-grow dark:text-zinc-200">请完成安全验证</span>
            <m-svg-icon name="refresh" fillClass="fill-zinc-900 dark:fill-zinc-200" class="w-3 h-3 rounded-sm  duration-300 cursor-pointer hover:bg-zinc-200 dark:hover:bg-zinc-900 mr-2" @click="onRest"></m-svg-icon>
            <m-svg-icon name="close" fillClass="fill-zinc-900 dark:fill-zinc-200" class="w-3 h-3 rounded-sm  duration-300 cursor-pointer hover:bg-zinc-200 dark:hover:bg-zinc-900" @click="onClose"></m-svg-icon>
        </div>
        <!-- captcha -->
        <div id="captcha"></div>
    </div>
</template>
<script>
const EIMITS_CLOSE = 'close'
const EIMITS_SUCCESS = 'success'
</script>
<script setup>
import '@/vendor/SliderCaptcha/longbow.slidercaptcha.min.js'
import '@/vendor/SliderCaptcha/slidercaptcha.min.css'
import { getCaptcha } from '@/api/sys'
import {onMounted,defineEmits} from 'vue'
let captcha = null
const onRest = () => {
    captcha.reset()
}
const onClose = () => {
    emits(EIMITS_CLOSE)
}
const emits = defineEmits([EIMITS_CLOSE,EIMITS_SUCCESS])
onMounted(()=>{
    captcha = sliderCaptcha({
        id: 'captcha',
        onSuccess: async (arr)=>{
            const res = await getCaptcha({
                behavior:arr
            })
            if(res){
                emits(EIMITS_SUCCESS)
            }
        },
        onFail:()=>{
            console.log('验证失败')
        },
        verify:()=>{
           return true
        }
    })
})
</script>
<style lang="scss" scoped></style>